<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/' }">
      <i class="el-icon-s-promotion"></i> 后台管理
    </el-breadcrumb-item>
    <el-breadcrumb-item>添加酒店房间信息</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>

  <el-form style="margin-left: 100px" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm">
    <el-form-item label="酒店名字">
      <el-select style="width: 300px" v-model="ruleForm.hotelName" placeholder="请选择">
        <el-option
            v-for="item in hotelArr"
            :key="item.id"
            :label="item.name"
            :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="房间类型" prop="roomName">
      <el-input v-model="ruleForm.roomName" style="width: 300px"></el-input>
    </el-form-item>
    <el-form-item label="房间数量" prop="number">
      <el-input v-model="ruleForm.number" style="width: 300px"></el-input>
    </el-form-item>
    <el-form-item label="房间价格" prop="price">
      <el-input v-model="ruleForm.price" style="width: 300px"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">添加</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
export default {
  data(){
    return{
      ruleForm:{
        hotelName:'',
        hotelId:'',
        roomName:'',
        number:'',
        price:''
      },
      hotelArr:[],
      rules:{
        roomName:[
          {required: true, message: '请输入房间类型', trigger: 'blur'}
        ],
        number:[
          {required: true, message: '请输入房间数量', trigger: 'blur'}
        ],
        price:[
          {required: true, message: '请输入房间价格', trigger: 'blur'}
        ],
      }
    }
  },
  methods:{
    submitForm(){
      for (let item of this.hotelArr){
        if (this.ruleForm.hotelName==item.name){
          this.ruleForm.hotelId=item.id;
          break;
        }
      }
      console.log(this.ruleForm);
      let url = 'http://localhost:9580/hotels/admin/addAdminHotelRoomInfo';

      let formData=this.qs.stringify(this.ruleForm);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state==20000){
              this.dialogFormVisible=false;
              this.$message({
                message: '添加酒店酒店房间信息成功！',
                type: 'success'
              });
              this.$router.push('/admin/adminPage/HotelRoomInfoListView');
            }else if (responseBody.state == 40400) {
              this.$alert(responseBody.message, '警告', {
                confirmButtonText: '确定',
                callback: action => {
                  this.loadHotelList();
                }
              });
            } else {
              this.$message.error(responseBody.message);
            }
      });
    },
    loadHotelList() {
      let url = 'http://localhost:9580/hotels/admin/getHotelList';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.hotelArr = responseBody.data;
        console.log(this.hotelArr);
      });
    }
  },
  mounted() {
    this.loadHotelList();
  }
}
</script>

<style scoped>

</style>